<template>
    <UpPullLoad @trigger="loadMore" @scroll="scroll">
        <div class="relative">
            <div class="fixed top-0 left-0 right-0 z-50 py-2 topbar" ref="topbarRef">
                <Topbar @search="search"/>
            </div>
            <Banner />
            <div ref="categoryRef">
                <Categorys />
            </div>
            <Service />
            <div class="px-4 py-2"><img :src="ad" /></div>
            <FlashKilling />
            <Marketing />
            <Hot />
            <div class="h-2"></div>
            <GoodList ref="goodsRef" />
        </div>
    </UpPullLoad>
</template>
<script setup lang="ts">
import ad from '~/assets/ad/ad2.png'
import Banner from './components/banner.vue'
import Categorys from './components/categorys.vue'
import Service from './components/service.vue';
import FlashKilling from './components/flashKilling.vue'
import Marketing from './components/marketing.vue'
import Hot from './components/hot.vue';
import GoodList from './components/goodsList.vue';
const {push} = useRouter()
const goodsRef = ref();
const opacity = ref(1);
const searchIconColor = ref('#fff');
const searchColor = ref('');
const loadMore = ({ done }: any) => {
    goodsRef.value.loadMore({ done })
}
const categoryRef = ref<HTMLElement>();
const topbarRef = ref<HTMLElement>();
const search = ()=>{
    push({
        name:'search',
        query:{
            q:'洗澡水',
            source:'shop'
        }
    })
}
const scroll = (e: Event) => {
    const target = e.target as HTMLElement;
    const ot = categoryRef.value?.offsetTop || 0;
    if (ot - target.scrollTop > 0) {
        opacity.value = target.scrollTop / ot;
    } else {
        opacity.value = 1;
    }
    if (opacity.value > 0.5) {
        searchIconColor.value = '#bbb'
    } else {
        searchIconColor.value = '#fff'
    }
    searchColor.value = `rgba(255,255,255,${opacity.value})`
    topbarRef.value!.style.background = `rgba(255,255,255,${opacity.value})`;
}
defineOptions({
    name: 'shop'
})
onActivated(() => {
    console.log('shop activated')
})
</script>
<style scoped lang="scss">
:deep(.search) {
    @apply bg-gray-100;

    .search-text {
        @apply text-gray-500;
    }
}

:deep(.search-icon) {
    @apply transition-colors;
    color: v-bind(searchIconColor);
}

:deep(.search) {

    background-color: v-bind(searchColor)
}

:deep(.search-text) {
    color: v-bind(searchIconColor) !important;
}
</style>